Adding Graphics to a Vue App with D3 — Arrays, Collections, and Elements

D3 lets us add graphics to a front-end web app easily.

Vue is a popular front end web framework.

They work great together. In this article, we’ll look at how to add graphics to a Vue app with D3.

Arrays

D3 has methods to let us work with an array of numbers easily.

For example, we can write:

<template>
  <div id="app"></div>
</template>
<script>
import * as d3 from "d3";

export default {
  name: "App",
  mounted() {
    const data = [20, 40, 60, 80, 100];
    console.log(d3.min(data));
    console.log(d3.max(data));
    console.log(d3.extent(data));
    console.log(d3.sum(data));
    console.log(d3.mean(data));
    console.log(d3.quantile(data, 0.5));
    console.log(d3.variance(data));
    console.log(d3.deviation(data));
  },
};
</script>

We get the min value of the array with the d3.min method.

The max can be obtained from the d3.max method.

d3.extent returns the min and max of the array.

d3.sum returns the sum of the array values.

d3.mean returns the average of the array values.

d3.quantile returns the given quantile.

d3.variance returns the variance from the data.

d3.deviation returns the standard deviation of the data.

Collections API

We also work with objects with D3.

For example, we can write:

<template>
  <div id="app"></div>
</template>
<script>
import * as d3 from "d3-collection";

export default {
  name: "App",
  mounted() {
    const month = { jan: 1, Feb: 2, mar: 3, apr: 4 };
    console.log(d3.keys(month));
    console.log(d3.values(month));
    console.log(d3.entries(month));
  },
};
</script>

to get the keys, values, and key-value pairs from the month object respectively.

Selection API

We can select elements from the DOM and then style it our way.

For example, we can write:

<template>
  <div id="app">
    <p>hello</p>
  </div>
</template>
<script>
import * as d3 from "d3";

export default {
  name: "App",
  mounted() {
    d3.select("p").style("color", "red");
  },
};
</script>

select selects the first p element from the DOM.

Then we call style to set its color to red.

Also, we can write:

<template>
  <div id="app">hello</div>
</template>
<script>
import * as d3 from "d3";

export default {
  name: "App",
  mounted() {
    d3.selectAll("body").style("color", "red");
  },
};
</script>

Then we select all the body elements.

We can chain the methods.

For example, we can write:

<template>
  <div id="app">
    <p><b>hello</b></p>
  </div>
</template>
<script>
import * as d3 from "d3";

export default {
  name: "App",
  mounted() {
    const b = d3.selectAll("p").selectAll("b");
    console.log(b);
  },
};
</script>

We get the belement in the p element by chaining the selectAll method.

Also, we can filter elements that are selected with the filter method:

For instance, we can write:

<template>
  <div id="app">
    <table>
      <tr>
        <td>foo</td>
      </tr>
      <tr>
        <td>bar</td>
      </tr>
      <tr>
        <td>baz</td>
      </tr>
    </table>
  </div>
</template>
<script>
import * as d3 from "d3";

export default {
  name: "App",
  mounted() {
    const even = d3.selectAll("tr").filter(":nth-child(odd)");
    console.log(even);
  },
};
</script>

to get all the tr elements with even indexes.

We can merge the selections with the merge method:

<template>
  <div id="app">
    <div id="svgcontainer"></div>
  </div>
</template>
<script>
import * as d3 from "d3";
import Vue from "vue";

export default {
  name: "App",
  mounted() {
    Vue.nextTick(() => {
      const width = 300;
      const height = 300;
      const svg = d3
        .select("#svgcontainer")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
      const rect = svg
        .append("rect")
        .attr("x", 20)
        .attr("y", 20)
        .attr("width", 200)
        .attr("height", 100)
        .attr("fill", "green");

      const rect2 = svg
        .append("rect")
        .attr("x", 20)
        .attr("y", 20)
        .attr("width", 100)
        .attr("height", 100)
        .attr("fill", "blue");

      rect.enter().append("rect").merge(rect2);
    });
  },
};
</script>

We have 2 rectangles, rect and rect2 .

Then we have:

rect.enter().append("rect").merge(rect2);

to combine the 2 rectangles together.

Now we see the blue and green rectangles side by side.

Conclusion

We can work with arrays, objects, and DOM elements with D3 in Vue apps.